<template>

    <swiper :options="swiperOption" ref="mySwipers" @someSwiperEvent="callback" class="carousel-swiper" v-if="sixData.length>0">
        <!-- slides -->
        <swiper-slide v-for="item in 2" :key="item" style="height:10rem">
            <div class="data-item" v-for="(s,index) in sixData" :key="index" v-if="index<item*3&&index>=(item-1)*3" :class="s.lv<0?'active':''">
                <div class="title">{{s.name}}/USDT</div>
                <div class="nowData">{{s.price}}</div>
                <div class="diffData">{{s.lv*100|parseint}}%</div>
                <div class="cyn">≈{{s.cny}} CNY</div>
            </div>
        </swiper-slide>

        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
        <!--        <div class="swiper-button-prev" slot="button-prev"></div>-->
        <!--        <div class="swiper-button-next" slot="button-next"></div>-->
        <!--        <div class="swiper-scrollbar"   slot="scrollbar"></div>-->
    </swiper>


</template>

<script>

    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        name: "Carousel",
        components: {
            swiper,
            swiperSlide,
			timer:{}
        },
        data(){
            return {
                swiperOption: {
                    loop: false,
                    speed: 900,
                    // autoplay: {
                    //     delay: 3000, //3秒切换一次
                    //     disableOnInteraction: false
                    // },
                    observer: true,//修改swiper自己或子元素时，自动初始化swiper
                    observeParents: true,//修改swiper的父元素时，自动初始化swiper

                    pagination: {
                        el: '.carousel-swiper .swiper-pagination',
                        clickable: true,
                    },
                },
                sixData:[]
            }
        },
        filters:{
          parseint(val){
              let num = ''
              if(val>0){
                  num = '+' + val.toFixed(2)
              }else{
                  num = val.toFixed(2)
              }
              return num
          }
        },
        methods:{
            callback(){

            }
        },
        mounted(){
			let _this = this
			_this.$api.home.getsixData().then(res=> {
			// 执行某些操作
			_this.sixData = res.data.data
			})
			
			this.timer = setInterval(function(){
				_this.$api.home.getsixData().then(res=> {
                // 执行某些操作
                _this.sixData = res.data.data
				})
			},6000)
            
        },
        computed: {

        },
		destroyed(){
			clearInterval(this.timer)
		}
    }
</script>

<style>

    .carousel-swiper{
        background: #fff;
    }
    .carousel-swiper .swiper-slide{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;

    }
    .data-item{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 65%;
        width: 30%;
        flex-wrap: wrap;
    }
    .data-item>div{
        width: 100%;
        text-align: center;
    }
    .title{
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(51,51,51,1);
    }
    .nowData{
        font-size:1.25rem;
        font-family:PingFang SC;
        font-weight:bold;
        color:rgba(20,163,101,1);
    }
    .diffData{
        font-size:0.81rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(20,163,101,1);
    }
    .cyn{
        font-size:0.75rem;
        font-family:PingFang SC;
        font-weight:500;
        color:rgba(153,153,153,1);
    }
    .carousel-swiper .swiper-pagination span{
        /*display: block;*/
        opacity: .48;
        width: 15px!important;
        height: 2px!important;
        background-color: #9EA4A1;
        border: none;
        outline: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        -webkit-transition: .3s;
        transition: .3s;
        border-radius: 0;

    }
    .carousel-swiper .swiper-pagination .swiper-pagination-bullet-active{
        background-color: #14A365!important;
    }
    .data-item.active .nowData, .data-item.active .diffData{
        color: #FF3D3D;
    }
</style>